<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ocean by Joshua D. Peterson</title>
<link rel="stylesheet" type="text/css" href="ocean.css" />
</head>
<body>
<div class="t-cont t-measure t-font t-link">
  <div class="t-measure ql-div">
    <div class="t-measure ql-div-link">
      <!-- Quick Links -->

	  </div>
  </div>
  <div class="t-measure logo-div">
    <!-- Logo -->
  </div>
  <div class="t-measure nav-div t-link nav-link">
  	<!-- Navigation -->
	
	<!-- This can be especially difficult if you do not understand
	     exactly what is going on here. -->
		 
	<!-- <a href="#">My Page Name</a>
	
		 The link above is a typical link for the navigation. You
	     do not have to apply any special class, or include any
		 special tags within the link to make it look right. For the
		 "current page" effect - or whatever you call it - you do
		 have to do something different.
		 
		 With the tag below, you will need to do two things:
		 
		 1. Assign the link the class name "nav-selected"
		 2. Enclose the link's text in a <p> (paragraph) tag.
		 
		 i.e. <a href="#" class="nav-selected"><b>Template Information</b></a>
    -->
  </div>
  <div class="t-measure t-sep nav-sep-div t-link nav-sep-link t-font">
  <!-- Navigation Separator / Sub-Navigation
       
	   Turn this into a sub-navigation if you want to!
       The code is set to use a similar link system.
  -->
  </div>
  <div class="t-measure ad-div">
  <!-- Advertisements / Welcome Photo
  	   
	   Just change the image or add two.
       The margins between the edges and the image should be 4 pixels.
	   
	   Compensate for the difference if you add a border. (i.e. 2px border = 2px margins)
	   
	   So if you do 2 photos, make sure they have a 4px margin between them.
  -->
  </div>
  <div class="t-sep"></div>
  <!-- Content
  
       The following tag is very important, so do not play around with it!
	   
	   You have 3 options available to you for the layout:
	   25 / 75 = 200px for the left column, 600px for the right column.
	   50 / 50 = 400px for each column.
	   75 / 25 = 600px for the left column, 200px for the right column.
	   
	   To change the layout style, change the class name to:
	   25 / 75 = "content-25"
	   50 / 50 = "content-50"
	   75 / 25 = "content-75"
	   
	   IMPORTANT:
	   If you use the 75/25 layout, switch "con-style" with "nav-style" and vice-versa.
	   If you would prefer to, you can switch the "con-style" with "nav-style" and vice-versa.
  -->
  <div id="gpc-content" class="content-25">
   <div class="c-contain">
       <div class="t-font t-link c-left-col nav-style">
	   <!-- Start Left Column Content -->

       <!-- End Left Column Content -->
	   </div>
	   <div class="t-font t-link c-right-col con-style">
   	   <!-- Start Right Column Content -->

       <!-- End Right Column Content -->
	   </div>
	   <div class="c-foot"></div>
   </div>
  </div>
  <div class="t-sep"></div>
  <div class="t-measure foot-div">
    <!-- Footer -->
	  <div class="t-font t-link foot-font">
	  </div>
  </div>
  <div class="foot-ref"></div>
</div>
</body>
</html>
